<template>
	<div>
		<el-form ref="form" :model="form" label-width="80px">
			<el-form-item>
				<el-select v-model="form.deptId" placeholder="请选择">
					<el-option v-for="item in deptList" :label="item.deptName" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="关键词">
				<el-input v-model="form.keyword"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="findStore()">查询</el-button>
				<el-button>取消</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="storeList" style="width: 100%">
			<el-table-column prop="id" label="ID">
			</el-table-column>
			<el-table-column prop="username" label="username">
			</el-table-column>
			<el-table-column prop="password" label="password">
			</el-table-column>
			<el-table-column prop="name" label="name">
			</el-table-column>
			<el-table-column prop="email" label="email">
			</el-table-column>
			<el-table-column prop="telphone" label="telphone">
			</el-table-column>
			<el-table-column prop="deptName" label="部门名称">
			</el-table-column>
			<el-table-column prop="position" label="position">
			</el-table-column>
			<el-table-column prop="storeName" label="storeName">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
					<el-button type="text" @click="handledelClick(scope.row)" size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<div class="block">

			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" :page-sizes="[2, 4, 6, 8]" :page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>



		<el-dialog title="修改" :visible.sync="dialogVisible" :before-close="handleClose">

			<el-form ref="tableForm" :model="tableForm" label-width="80px">
				<el-form-item label="门店名称">
					<el-input v-model="tableForm.storeName"></el-input>
				</el-form-item>
				<el-form-item label="员工姓名">
					<el-input v-model="tableForm.name"></el-input>
				</el-form-item>
				<el-form-item label="职位">
					<el-input v-model="tableForm.position"></el-input>
				</el-form-item>

				<el-form-item label="所属部门">
					<el-select v-model="tableForm.deptId" placeholder="请选择">
						<el-option v-for="item in deptList" :key="item.id" :label="item.deptName" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="邮箱">
					<el-input v-model="tableForm.email"></el-input>
				</el-form-item>

				<el-form-item label="手机号">
					<el-input v-model="tableForm.telphone"></el-input>
				</el-form-item>

				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="update()">确 定</el-button>


			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import axios from "axios"
	export default {
		data() {
			return {
				storeList: [],
				form: {
					deptId: '',
					keyword: ''
				},
				tableForm: {
					deptId: '',
					deptName: '',
					email: '',
					id: '',
					name: '',
					password: '',
					position: '',
					storeName: '',
					telphone: '',
					username: ''
				},

				deptList: [],
				currentPage: 1, //当前页
				pageSize: 4,
				total: '',
				dialogVisible: false

			}

		},

		methods: {
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			loadDeptList() {
				axios.get('http://localhost:20010/api-dept/api/dept/findAll').then(res => {
					console.log(res)
					this.deptList = res.data
				})

			},

			findStore() {
				axios.get('http://localhost:20010/api-store/api/user-store/findAll?deptId=' + this.form.deptId +
					'&keyword=' + this.form
					.keyword + '&pageNumber=' + this.currentPage + '&pageSize=' + this.pageSize).then(res => {

					this.storeList = res.data.data.list;
					this.total = res.data.data.total;

				})
			},
			//当改变每页显示的条数时触发,例如从每页显示十条变为每页显示20条
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				//this.currentPage =  1;
				this.pageSize = val;
				this.findStore();
			},
			//当点击下一页，上一页，去到第几页时触发
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val;
				this.findStore();
			},
			handleClick(row) {
				this.tableForm = row;
				this.dialogVisible = true
				console.log(row);

			},
			update() {
				axios.post('http://localhost:20010/api-store/api/user-store/updateUserStoreById', this.tableForm).then(
					res => {
						console.log(res.data);
						if (res.data.code == 1) {
							this.$message({
								message: '修改成功',
								type: 'success'
							});

							this.dialogVisible = false

							this.findStore();
						} else {
							this.$message({
								message: '修改失败'

							});
						}
					})
			},
			handledelClick(row){
				console.log(row)
				
				axios.get('http://localhost:20010/api-store/api/user-store/deleteUserStoreById/'+row.id).then(res=>{
					if (res.data.code == 1) {
						this.$message({
							message: '删除成功',
							type: 'success'
						});
					
						
					
						this.findStore();
					} else {
						this.$message({
							message: '删除失败'
					
						});
					}
				})
				
			}
		},

		created() {

			this.loadDeptList();
			this.findStore();


		}
	}
</script>

<style>
</style>